<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.a{
				width: 200px;height: 200px;
				background-color: papayawhip;
				/*定位*/
				position: relative;
				left: 0;
				/*重点*/
				animation: aa 1s linear 1s infinite;
			}
			.b{
				width: 200px;height: 200px;
				background-color: black;
				/*定位*/
				position: relative;
				left: 0;
				/*重点*/
				animation: aa 1s linear 2s infinite;
			}
			.c{
				width: 200px;height: 200px;
				background-color: hotpink;
				/*定位*/
				position: relative;
				left: 0;
				/*重点*/
				animation: aa 1s linear 3s infinite;
			}
			.d{
				width: 200px;height: 200px;
				background-color: brown;
				/*定位*/
				position: relative;
				left: 0;
				/*重点*/
				animation: aa 1s linear 4s infinite;
			}
			/*定义一个叫aa动画*/
			@keyframes aa{
				/*从哪里...到哪里...*/
				/*left左 right右 top上 bottom下*/
				0%{
					left:0;
				}
				25%{
					left: 100px;
					top: 0;
					}
				50%{
					left: 100px;
					top: 100px;
				}
				75%{
					left: 0px;
					top: 100px;
				}
				100%{
					left: 0px;
					top: 0px;
				}
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
	</body>
</html>